<!--
 * @Descripttion:
 * @version:
 * @Date: 2021-04-20 11:06:21
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-09-24 18:18:43
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
-->
<template>
  <div>
    <div id="main" style="width:600px;height:500px;float: left"></div>
    <div id="main1" style="width:600px;height:500px;float: right"></div>
    <!--   <el-button @click="getmain">出来</el-button>-->
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

onMounted(() => {
  getmain()
})
function getmain() {
  //获取echarts对象
  let myChart = echarts.init(document.getElementById('main'))
  let myChart1 = echarts.init(document.getElementById('main1'))
  // 指定图表的配置项和数据
  let option = {
    backgroundColor: '#2c343c',
    title: {
      //标题配置
      text: '资产占比',
      left: 'center',
      top: 20,
      textStyle: {
        color: '#f00',
      },
    },

    tooltip: {
      //提示框显示
      trigger: 'item', //当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。
      formatter: '{a} <br/>{b} : {c} ({d}%)', //系列名  数据项变量名  数据值   百分比
    },

    visualMap: {
      show: false,
      min: 80,
      max: 600,
      inRange: {
        colorLightness: [0, 1],
      },
    },
    legend: {
      //图例
      orient: 'vertical', //纵向显示
      x: 'left',
      textStyle: {
        color: '#f00',
      },
      data: ['存款', '理财产品', '余额', '银行卡', '信用卡'],
    },
    series: [
      //数据
      {
        name: '资产占比',
        type: 'pie', //饼图
        radius: '75%',
        center: ['50%', '50%'],
        data: [
          { value: 335, name: '存款' },
          { value: 310, name: '理财产品' },
          { value: 500, name: '余额' },
          { value: 235, name: '银行卡' },
          { value: 400, name: '信用卡' },
        ].sort(function(a, b) {
          return a.value - b.value
        }), //按照value值从小到大排序
        roseType: 'radius',
        label: {
          color: 'rgba(255, 255, 255, 0.3)',
        },
        labelLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)',
          },
          smooth: 0.2,
          length: 10,
          length2: 20,
        },
        itemStyle: {
          color: '#c23531',
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },

        // animationType: "scale",
        // animationEasing: "elasticOut",
      },
    ],
  }
  let option2 = {
    title: {
      //标题配置
      text: '理财收益/周',
      left: 'center',
      top: 20,
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    legend: {},
    toolbox: {
      //工具栏
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    tooltip: {
      trigger: 'axis', //显示当前列的所有信息
    },
    yAxis: {
      type: 'value',
    },
    series: [
      //数据   五条折线数据  line 折线
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
      },
      {
        data: [11, 22, 33, 44, 55, 66, 77],
        type: 'line',
      },
      {
        data: [111, 222, 333, 444, 555, 666, 777],
        type: 'line',
      },
      {
        data: [711, 622, 533, 444, 355, 266, 177],
        type: 'line',
      },
      {
        data: [611, 422, 533, 644, 755, 666, 177],
        type: 'line',
      },
    ],
  }
  myChart1.setOption(option2)
  myChart.setOption(option)
}
</script>
<style scoped>
.echart {
  width: 800px;
  height: 500px;
}
</style>
